<html>
<head>
	<meta charset="utf-8">
	<title>vue 计算属性和侦听器</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="example">
	  <p>-----data用法-----</p>
	  <span>Original message: "{{ message }}"</span>
	  <p>-------(computed用法)计算属性-------</p>
	  </span>Computed reversed message: "{{ reversedMessage }}"</span>

	  <br>
	  </span>Now: "{{now}}"</span>
	  
	  <p>------method用法------</p>
	  </span>Reversed message: "{{ reversedMessageB() }}"</span>
	   <br>

	   <button v-on:click="changeMessage">改变Message</button>
	   <button v-on:click="showNow">尝试更新时间</button>

	</div>
	<p>------Watch----</p>
	<div id="demo">Demo:{{ fullName }}</div>
	<p>-----computed:-------</p>
	<div id="demo1">Demo1:{{ fullName }}</div>
    <p>-----get,set,-----</p>
	<div id="demo2">Demo2:{{ fullName }}</div>

	<div id="watch-example">
	  <p>
	    Ask a yes/no question:
	    <input v-model="question">
	  </p>
	  <p>{{ answer }}</p>
	</div>
	
	<script type="text/javascript">
		// data ,computed,methods 用法
		var vm2 = new Vue({
		  el: '#example',
		  data: {
		    message: 'Hello'
		  },

		  computed: {
		    // 计算属性的 getter
		    reversedMessage: function () {
		      // `this` 指向 vm 实例
		      return this.message.split('').reverse().join('')
		    },

		     now: function () {
		     	console.log("加载一次时间");
			    return Date.now()
			 }
		  },

		  methods: {
		  	reversedMessageB: function () {
		    	return this.message.split('').reverse().join('')
		  	},
		  	changeMessage:function(){
		  		this.message="GoodBye"
		  	},
		  	showNow:function(){
		  		this.now();
		  		this.changeMessage();
		  		// return Date.now()
		  	},
		  	
		  },
		})

		//data 用的，Watch 用法
		var vm1 = new Vue({
		  el: '#demo',
		  data: {
		    firstName: 'Foo',
		    lastName: 'Bar',
		    fullName: 'Foo Bar'
		  },

		  watch: {
		    firstName: function (val) {
		      this.fullName = val + 'Test ' + this.lastName
		    },

		    lastName: function (val) {
		      this.fullName = this.firstName + '测试 ' + val
		    }
		  }
		})

		//data，computed
		var vm = new Vue({
		  el: '#demo1',
		  data: {
		    firstName: 'Foo',
		    lastName: 'Bar'
		  },
		  computed: {
		    fullName: function () {
		      return this.firstName + ' ' + this.lastName
		    },


		  }
		})

        //computed 下的 get,set 
		var vm3=new Vue({
			el: '#demo2',
			data: {
			    firstName: 'Foo',
			    lastName: 'Bar'
			},

			computed: {
				fullName: {
				    get: function () {
				      return this.firstName + ' ' + this.lastName
				    },
				    // setter
				    set: function (newValue) {
				      var names = newValue.split(' ')
				      this.firstName = names[0]
				      this.lastName = names[names.length - 1]
				    }
				}	
			},
		})
	
		// 如果 `question` 发生改变，这个函数就会运行
		var watchExampleVM = new Vue({
		  el: '#watch-example',

		  data: {
		    question: '',
		    answer: 'I cannot give you an answer until you ask a question!'
		  },

		  watch: {
		      question: function (newQuestion, oldQuestion) {
		      this.answer = 'Waiting for you to stop typing...'
		      this.debouncedGetAnswer()
		    }
		  },
		  

		})

	</script>
<style type="text/css">
	p{
		color: red;
	}
</style>
</body>
</html>